<!DOCTYPE html>
<!--suppress ALL -->
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/head::commonHeaderList('试卷管理')">
<body>
<style type="text/css">
    [v-cloak] {
        display: none;
    }

    .paperList {
        list-style: none;
        padding-left: 10px;
    }

    .paperItem {
        border: solid 1px #e7dada;
        height: 100px;
        line-height: 32px;
        margin: 20px;
        padding-top: 5px;
    }

    .paperItem img {
        border-width: 0px;
        position: absolute;
        left: 0px;
        top: 0px;
        width: 74px;
        height: 76px;
        padding: 10px;
    }

    .paperItem button {
        margin-left: 10px;
    }
</style>

<div id="content" class="col-lg-12 col-sm-12" style="padding: 5px;">
    <div class="row" id="paperList">
        <div v-if="papers.length==0 && !isFirst" class="text-center" style="font-size: 18px;margin-top: 20px;">~暂无做题记录~</div>
        <ul v-else class="list-unstyled list-inline paperList" v-cloak>
            <li v-for="paper in papers" class="paperItem col-md-5">
                <div class="col-md-2"><img v-bind:src="paper.textbooksUrl"/></div>
                <div class="col-md-10">
                    <div>{{ paper.paperName }}
                        <span class="pull-right" style="font-weight: bold;font-size: 18px;" v-text="paper.state>=2?paper.score:'等待批改'"></span>
                    </div>
                    <div class="text-right">
                        <span v-text="paper.state==0?'未完成':(paper.state==1)?'未批改':(paper.state==2)?'未讲解完':'已讲解完'">未讲解完</span>
                        <button class="btn btn-info btn-sm" v-on:click="preview(paper.scoreId,paper.paperId)">去看看</button>
                    </div>
                    <div class="text-right">考试时间：{{ paper.submitTime }}</div>
                </div>
            </li>
        </ul>
    </div>
</div>

<div th:include="include/onload_js::onloadJSCustomList(~{::script})">
    <script type="text/javascript" src="../../static/js/vue.min.js" th:src="@{/static/js/vue.min.js}"></script>
    <script type="text/javascript" th:inline="javascript">
        var ADMIN_TOKEN_STRING = "S6AsGHLhri4-VJyGrBfPsbEpD56SNSTScoolBwW7QTbpa65H-QbKisyjsEf9TD1WneWUxynXB7VupWEZWkCQ-A";

        /*<![CDATA[*/
        var pid = /*[[${personId}]]*/0;
        var testServerUrl = /*[[${testServerUrl}]]*/'';
        var rnd = /*[[${rnd}]]*/'';
        /*]]>*/

        $(function () {
            var app = new Vue({
                el: '#paperList',
                data: {
                    papers: [],
                    isFirst: true
                },
                created: function () {
                    getData();
                }
            });

            function getData() {
                $.ajax({
                    type: "post",
                    url: "/testPaper/studentDone/list?personId=" + pid + "&tokenString=" + ADMIN_TOKEN_STRING,
                    data: {},
                    beforeSend: function () {
                        // 开启加载层
                        layer.load(2, {
                            shade: [0.6, '#fff'], content: '数据加载中...', success: function (layero) {
                                layero.find('.layui-layer-content').css({
                                    'padding-top': '6px',
                                    'width': '150px',
                                    'padding-left': '40px'
                                });
                                layero.find('.layui-layer-ico16, .layui-layer-loading .layui-layer-loading2').css({
                                    'width': '150px !important',
                                    'background-position': '2px 0 !important'
                                });
                            }
                        });
                    },
                    success: function (res) {
                        //关闭加载层
                        layer.closeAll('loading');
                        //console.log(JSON.stringify(res));
                        if (res != null && res.status == 1) {
                            app.papers = res.data.list;
                            // layer.msg('操作成功', {icon: 1});
                        } else {
                            layer.msg('操作失败:' + res.msg, {icon: 2});
                        }
                        app.isFirst = false;
                    },
                    error: function () {
                        app.isFirst = false;
                        //关闭加载层
                        layer.closeAll('loading');
                        layer.msg('系统异常:', {icon: 2});
                    }
                });
            }
        });

        function preview(sid, tpid) {
            var url = testServerUrl + "testPaper/#/?rnd="+ rnd +"&from=CRM&tpid=" + tpid + "&qid=0&pid=" + pid + "&sid=" + sid + "&isAdmin=0&tokenString=" + ADMIN_TOKEN_STRING;
            console.log("url=" + url);
            //iframe窗口
            layer.open({
                type: 2,
                title: false,
                closeBtn: 1, //显示关闭按钮
                shade: 0.4,
                area: ['90%', '90%'],
                content: [url, 'yes'], //iframe的url，no代表不显示滚动条
                end: function () { //此处用于演示
                }
            });
        }
    </script>
</div>
</body>
</html>